<template>
  <div>

    <van-nav-bar
      title="确认订单"
      left-arrow
      @click-left="$router.back()"
    />

    <van-cell class="btnAddress" v-if="!checkedAddress.id">
      <van-button color="#ee0a24" size="small" round @click="$router.push({path:'/address',query:{id:'aaa'}})">点击添加地址</van-button>
    </van-cell>
    <van-cell-group inset v-else>
      <van-cell 
        style="padding-left:0;padding-right:0" 
        center 
        :title="checkedAddress.name" 
        :value="checkedAddress.mobile" 
        :label="checkedAddress.full_region" 
        is-link 
        @click="$router.push({path:'/address',query:{id:'aaa'}})"
      />
    </van-cell-group>
    
    <van-cell title="请选择优惠券" is-link :value="`${couponList.length}张`" />
    <van-cell title="商品合计" is-link :value="`￥${goodsTotalPrice}`" />
    <van-cell title="运费" is-link :value="`￥${freightPrice}`" />
    <van-cell title="优惠券" is-link :value="`-￥${couponPrice}`" />
    <van-cell title="订单留言" :label="message" @click="show=true" is-link />
    <van-cell title="商品信息"></van-cell>
    <van-card
        v-for="item in list"
        :key="item.id"
        :num="item.number"
        :price="item.retail_price"
        :title="item.goods_name"
        :thumb="item.list_pic_url"
      />

    <van-cell class="box-bottom">
      <van-row type="flex" justify="space-between" align="center"> 
        <span class="fontSize">实付：￥{{actualPrice}}</span>
        <van-button type="primary" style="width:150px" color="#e11c34" @click="toPayment">去付款</van-button>
      </van-row>
    </van-cell>


    <!-- 订单留言 -->
    <van-action-sheet class="textarea" title="留言" v-model="show" :round="false" closeable>
        <van-field
        class="border"
        v-model="message"
        rows="2"
        autosize
        type="textarea"
        placeholder="请输入留言"
      />
    </van-action-sheet>

  </div>
</template>

<script>
import {checkoutOrder,orderInfo} from '@/api/gaoqing/shopping'
export default {
  name: 'Checkout',
  data() {
    return {
      message: '',
      show: false,
      list: [],
      checkedAddress: {},
      goodsTotalPrice: '',
      freightPrice: '',
      couponPrice: '',
      couponList: [],
      actualPrice: ''
    }
  },
  created () {
    this.initData();
  },
  methods: {
    async initData() {
      let {data} = await checkoutOrder({
        // addressId: 318,
        addressId: this.$route.query.addressId ? this.$route.query.addressId : '',
        couponId: ''
      })
      console.log(data.data);
      this.list = data.data.checkedGoodsList
      this.checkedAddress = data.data.checkedAddress
      this.goodsTotalPrice = data.data.goodsTotalPrice
      this.freightPrice = data.data.freightPrice
      this.couponPrice = data.data.couponPrice
      this.couponList = data.data.couponList
      this.actualPrice = data.data.actualPrice
    },
    async toPayment(){
      if(!this.checkedAddress.id){
        return this.$toast.fail('请选择地址')
      }
      let res = await orderInfo({
        addressId: this.checkedAddress.id,
        // couponId: this.couponList[0].coupon_id,
        postscript: this.message
      })
      this.$router.push(`/paymentOrder/${res.data.data.orderInfo.id}`)
    }
  },
}
</script>

<style lang="less" scoped>
.btnAddress{
  padding-left: 280px;
}
.textarea{
  height: 300px;
  .border{
    border: 1px solid #eee;
  }
}
.box-bottom{
  padding: 0 10px 0 30px;
  position: fixed;
  bottom: 0;
  border-top: 1px solid #eee;
  box-shadow: 0px 0px 4px #aaa
}
.fontSize{
  font-size: 30px;
}
/deep/ .van-nav-bar__content {
  background-color: #e11c34;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar .van-icon{
  color: #fff;
}
</style>